<!DOCTYPE html>
                <html style="height: 100%;width:100%">
                    <head>
                        <meta charset="utf-8">
                    </head>
             <body style="height: 100%; width:100%">
                        <div id="chart-panel" style="height: 100%;width: 100%"></div>
                        <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
                        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
                        <script type="text/javascript" src="http://zhangmuchen.top/file/dep/echarts/map/js/china.js"></script>

                        <script type="text/javascript">
                var dom = document.getElementById("chart-panel");
                var myChart = echarts.init(dom);
                var option;
                var app ={};
                /* 
请勿在原图上直接修改保存
*/
function mapTooltipClick(name) {
	alert(name)
}

function tooltipCharts() {
	console.log(arguments[0]);
	var myChart1 = echarts.init(document.getElementById('tooltipBarId'));
	var option = {
		tooltip: {},
		dataset: {
			source: [
				['xAxis', '201701', '201702', '201703', '201704', '201705', '201706', '201707', '201708', '201709', '20170', '201710', '20170', '201801'],
				['amount', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7, 65.1, 53.3, 41.1, 30.4, 53.3, 41.1, 53.3, 83.8]
			]
		},
		xAxis: {
			type: 'category',
			interval: true,
			axisLabel: {
				rotate: 45
			},
			axisTick: {
				show: false
			}
		},
		yAxis: {},
		color: ['#4FA8F9', '#F5A623'],
		grid: {
			show: true,
			backgroundColor: '#FAFAFA',
			left: 30,
			right: 20,
			top: 20
		},
		series: [{
			type: 'bar',
			smooth: true,
			seriesLayoutBy: 'row',
			barWidth: 10
		}]
	};
	myChart1.setOption(option);
}
option = {
	visualMap: {
		min: 0,
		max: 1000,
		left: 'left',
		top: 'bottom',
		text: ['高', '低'],
		calculable: false,
		orient: 'horizontal',
		inRange: {
			color: ['#e0ffff', '#006edd'],
			symbolSize: [30, 100]
		}
	},
	tooltip: {
		padding: 8,
		enterable: true,
		transitionDuration: 1,
		textStyle: {
			color: '#333',
			decoration: 'none',
		}
	},
	series: [{
		name: '接入医院数量',
		type: 'map',
		mapType: 'china',
		itemStyle: {
			normal: {
				label: {
					show: false
				}
			},
			emphasis: {
				label: {
					show: true
				}
			}
		},
		label: {
			normal: { //静态的时候展示样式
				show: true, //是否显示地图省份得名称
				textStyle: {
					color: '#fff',
					fontSize: 12
				}
			},
			emphasis: { //动态展示的样式
				color: '#fff',
			},
		},
		data: [{
				name: '北京',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '天津',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '上海',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '重庆',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '河北',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '河南',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '云南',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '辽宁',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '黑龙江',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '湖南',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '安徽',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '山东',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '新疆',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '江苏',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '浙江',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '江西',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '湖北',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '广西',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '甘肃',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '山西',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '内蒙古',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '陕西',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '吉林',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '福建',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '贵州',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '广东',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '青海',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '西藏',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '四川',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '宁夏',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '海南',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '台湾',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '香港',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
			{
				name: '澳门',
				value: Math.round(Math.random() * 1000),
				tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
			},
		]
	}, ]
}
var count = 0;
var timeTicket = null;
var dataLength = option.series[0].data.length;
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function() {
	myChart.dispatchAction({
		type: 'downplay',
		seriesIndex: 0,
	});
	myChart.dispatchAction({
		type: 'highlight',
		seriesIndex: 0,
		dataIndex: (count) % dataLength
	});
	myChart.dispatchAction({
		type: 'showTip',
		seriesIndex: 0,
		dataIndex: (count) % dataLength
	});
	count++;
}, 1000);

myChart.on('mouseover', function(params) {
	console.log(params)
	clearInterval(timeTicket);
	myChart.dispatchAction({
		type: 'downplay',
		seriesIndex: 0
	});
	myChart.dispatchAction({
		type: 'highlight',
		seriesIndex: 0,
		dataIndex: params.dataIndex
	});
	myChart.dispatchAction({
		type: 'showTip',
		seriesIndex: 0,
		dataIndex: params.dataIndex,
	});
});
myChart.on('mouseout', function(params) {
	timeTicket && clearInterval(timeTicket);
	timeTicket = setInterval(function() {
		myChart.dispatchAction({
			type: 'downplay',
			seriesIndex: 0,
		});
		myChart.dispatchAction({
			type: 'highlight',
			seriesIndex: 0,
			dataIndex: (count) % dataLength
		});
		myChart.dispatchAction({
			type: 'showTip',
			seriesIndex: 0,
			dataIndex: (count) % dataLength
		});
		count++;
	}, 1000);
});
                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }
                 </script>
               </body>
            </html>
    